<template>
 <div class="permission-edit">
    <el-input
      placeholder="请输入用户名称"
      v-model="filterText">
    </el-input>
    <div class="page-box-row-left">
      <FormBlock
        title="所有用户"
        direction="column"
        style="width: 44%; max-width: 320px; overflow-x: hidden;"
        height="400px"
      >
        <el-tree
          class="treeStyle"
          ref="deptUserTree"
          :props="defaultProps"
          :data="groupData"
           node-key="nodeId"
          show-checkbox
          :check-strictly="true"
          @check-change="checkChange"
          :filter-node-method="filterNode"
        >
        </el-tree>
      </FormBlock>
      <FormBlock
        :title="`已选择(${selectUserList.length})`"
        direction="column"
        style="width: 45%; max-width: 330px; overflow-x: hidden; float: right;"
        height="400px"
      >
      <ul>
        <li class="word-wrap-box" style="padding:5px 20px" v-for="item in selectUserList" :key="item.nodeId"> {{item.nodeName}}</li>
      </ul>
      </FormBlock>
    </div>
  </div>

</template>

<script>
import coverApi from '@/api/cover.js'
export default {
    props:{
        title:{
            type: String,
            default() {
            return "";
            }
        },
        single: {
          type:Boolean,
          default: false
        }
    },
    data() {
      return {
        actions: [
            {
                text: "取消",
                theme: "cancel",
                handle: () => {
                    this.$emit("Close");
                }
            },
            {
                text: "确认",
                theme: "submit",
                icon: "save",
                //handle: this.save,
                  handle: () => {
                     this.$emit("Close", this.selectUserList);
                  },
                //loading: false
            }

        ],
        groupData: [],
        loading: false,
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'nodeName',
          isLeaf: 'leaf',
          disabled: (data, node) => {
            return data.path
          }
        },
        selectUserList: [],
      }
},
   watch: {
    filterText(val) {
        this.$refs.deptUserTree.filter(val);
      }
    },
  methods: {
     filterNode(value, data) {
        if (!value) return true;
        return data.nodeName.indexOf(value) !== -1;
      },
    checkChange(node, isCheck) {
      if (isCheck && !this.selectUserList.find((item) => item.nodeId == node.nodeId)) {
        if (!this.single) {
          this.selectUserList.push(node)
        } else {
          this.selectUserList = [node]
        }
        
      }
      if (!isCheck) {
        this.selectUserList = this.selectUserList.filter(item => item.nodeId !== node.nodeId)
      }
      this.$refs.deptUserTree.setCheckedKeys(this.selectUserList.map(item => item.nodeId))
    },
    renderList(list) {
      return list.map(item => {
        let group = item.itsReceiverGroupVoList.map(item1 => {
          return {
            ...item1,
            nodeId: item1.id,
            nodeName: item1.groupName
          }
        })
        if (item.rptTrgnodeTreeGroupTreeVoList.length) {
          let newList = this.renderList(item.rptTrgnodeTreeGroupTreeVoList)
            return {
              ...item,
              ...item.rptTrgnodeTreeVo,
              children: [
                ...newList,
                ...group
              ]
            }
        } else {
            return {
              ...item,
              ...item.rptTrgnodeTreeVo,
              children: [
                ...group
              ]
            }
        }       
      })
    },
    loadNode() {
      coverApi.getReceiverGroup({
        groupName: '',
      }).then(res => {
        let list = this.renderList(res.data.data)
        this.groupData = list
      })
    }
  },
  created: function () {
      this.$emit("SetTitle", this.title);
      this.$emit("SetPageWidth", 820); 
      this.$emit("SetPageActions", this.actions);
      this.loadNode()
    },

}
</script>

<style lang="less" scoped>
.data{
    padding: 24px;
    line-height: 1;
    min-height: 43px;
    font-size: 18px;
    color: #12151B;
    font-weight: 600;
}

.permission-edit {
  .page-box-row-left {
    // .el-tree > div > div > label {
    //   display: none;
    // }
    .operation-area {
      // width: 75px;
      width: 8%;
      max-width: 55px;
      padding-left: 6px;
      position: relative;
      // float: left;
      display: inline-block;
      // margin: 0 16px;
      vertical-align: middle;
      margin: 200px auto 0px auto;
      button {
        border-radius: 0;
      }
      button:first-child {
        color: #fff;
        background-color: #ff6f4b;
        border-color: #ff6f4b;
        margin-bottom: 16px;
      }

      button:not(:first-child) {
        color: #ff6f4b;
        background-color: #ffffff;
        border-color: #ff6f4b;
      }
    }
    .assignedTree {
      .ivu-input-wrapper {
        display: none;
      }
      .ivu-input-small {
        height: 22px;
        font-size: 12px;
      }
      .attribute-read-only {
        width: 100%;
        padding-left: 8px;
      }
      .el-tree-node__content:hover {
        .ivu-input-wrapper {
          display: inline-block;
        }
        .attribute-read-only {
          width: 100%;
          padding-left: 8px;
          display: none;
        }
      }
    }
  }
}
/* .search{
    /deep/.ivu-auto-complete div, .ivu-auto-complete:focus {
    margin-top: -3px;
    margin-bottom: 3px;
} 
}*/
.el-input{
    margin-bottom: 10px;
    margin-top: -10px;
}
/deep/.is-disabled {
  display: none;
}
/deep/.treeStyle {
  .el-tree-node__label {
      white-space: normal;
      word-wrap:break-word;
      word-break:break-all;
    }
    .el-tree-node__content {
      height: 100%;
    }
}
.word-wrap-box{
      white-space: normal;
      word-wrap:break-word;
      word-break:break-all;
}
</style>